vue自定义指令实现水波点击效果

2018-12-07

自定义指令实现点击水波蔓延效果

实现原理
点击时候获取鼠标位置，创建一个span标签，执行向外扩散，透明度由1变为0的动画
定义js文件

const ripple = (el) => {
  var addRippleEffect = function (e) {
    // var target = e.target
    var target = el
    // if (target.className.toLowerCase() !== 'btn') return false
    target.style.overflow = 'hidden'
    var rect = target.getBoundingClientRect()
    var ripple = target.querySelector('.ripple')
    if (!ripple) {
      ripple = document.createElement('span')
      ripple.className = 'ripple'
      ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
      target.appendChild(ripple)
    }
    ripple.classList.remove('show')
    var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop
    var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft
    ripple.style.top = top + 'px'
    ripple.style.left = left + 'px'
    ripple.classList.add('show')
    return false
  }
  el.addEventListener('click', addRippleEffect, false)
}

export default ripple

定义样式,需全局

.ripple
  position absolute
  background rgba(244, 172, 40 .4)
  border-radius 100%
  transform scale(0)
  pointer-events none
.ripple.show
  animation ripple .75s ease-out
@keyframes ripple
  from
    transform: scale(0)
    opacity: 1
  to
    transform scale(2)
    opacity 0

main.js中引入并注册指令

import Ripple from '@/assets/utils/ripple'
Vue.directive('ripple', {
  inserted: Ripple
})

使用

1	.item(v-ripple="")